<template>
  <div class='main'>
      <!--面包屑-->
      <div class='top'>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>项目群</el-breadcrumb-item>
          <el-breadcrumb-item>工单/报警</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/worderList'}">工单列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div>
        <el-card class='card'>
          <!--标题文字-->
          <div class='headerTitle'>
              <div>工单列表</div>
          </div>

          <!--搜索输入框-->
          <div class='search'>
            <el-select
              v-model="value"
              
              placeholder="能效"
              size="default"
              style='width:150px;margin-left:600px'
            >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            </el-select>

            <el-select
              v-model="value"
              
              placeholder="一小时"
              size="default"
              style='width:150px;margin-left:10px'
            >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            </el-select>

            <el-date-picker
              v-model="value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style='width:300px;margin-left:10px'
            />

            <el-button class='btn'>下载</el-button>

            <el-button class='btn'>打印</el-button>
          </div>

          <!--表格内容-->
          <div style='padding:0 20px'>
            <el-table :data="tableData" border
             style="width: 100%"

            :header-cell-style="{background:'#b4c7e7',color:'black',fontWeight:'500',padding:'0px'}"

            

            :row-style="{ background: '#f5f8fb'}"  

            :header-cell-class-name="cellClass">
              <el-table-column type='selection' width="50px" align="center"/>

              <el-table-column prop="1" label="工单发出" width="80px" align="center"/>

              <el-table-column prop="2" label="预期完成" width="80px" align="center"/>

              <el-table-column prop="3" label="实际完成" width="80px" align="center"/>

              <el-table-column prop="3.5" label="故障修复" width="80px" align="center"/>

              <el-table-column prop="4" label="响应" width="80px" align="center"/>

              <el-table-column prop="5" label="剩余" width="80px" align="center"/>

              <el-table-column prop="6" label="持续" width="80px" align="center"/>

              <el-table-column prop="7" label="问题描述" width="180px" align="center"/>

              <el-table-column prop="aaa" :filters="[
              { text: 1, value: 1 },
              { text: 2, value: 2 },
              { text: 3, value: 3 },
              { text: 4, value: 4 },
              { text: 5, value: 5 }]"
              class='type'
              class-name='jinji'
              :filter-method="filterTag" :label="urgency()" width="80px" align="center"/>




              <el-table-column prop="9" :filters="[
              { text: '优化操作', value: 0 },
              { text: '设备故障', value: 1 },
              { text: '预测性维护', value: 2 }]"
              class-name='jinji'
              :filter-method="filterTag" :label="work_order()" width="80px" align="center"/>

              <el-table-column prop="10" label="影响范围" :filters="[
              { text: '能效', value: 0 },
              { text: '舒适', value: 1 },
              { text: '安全', value: 2 },
              { text: '所有', value: 3 }]"
              :filter-method="filterTag" width="90px" align="center"/>

              <el-table-column prop="11" label="风险" :filters="[
              { text: '高', value: 0 },
              { text: '中', value: 1 },
              { text: '低', value: 2 }]"
              :filter-method="filterTag" width="70px" align="center"/>

              <el-table-column prop="12" :filters="[
              { text: '制冷机', value: 0 },
              { text: '冷冻泵', value: 1 },
              { text: '冷却泵', value: 2 },
              { text: '冷却塔', value: 3 },
              { text: 'BA系统', value: 4 }]"
              :filter-method="filterTag" :label="equipment()" width="100px" align="center"/>

              <el-table-column prop="13" label="操作指令" width="180px" align="center"/>

              <el-table-column prop="14" label="执行情况" :filters="[
              { text: '1级已阅', value: 0 },
              { text: '2级已阅', value: 1 },
              { text: '3级已阅', value: 2 },
              { text: '处理中', value: 3 },
              { text: '无理由不执行(超时关闭)', value: 4 },
              { text: '成功执行', value: 5 },
              { text: '因故不执行', value: 6 }]"
              :filter-method="filterTag" width="90px" align="center">
                <template v-slot='scope'>
                  <p @click='handleClick(scope.row)' class='cell'>{{scope.row[14]}}</p>
                </template>
              </el-table-column>

              <el-table-column prop="15" :filters="[
              { text: '张三', value: 0 },
              { text: '李四', value: 1 }]"
              :filter-method="filterTag" :label="personnel()" width="100px" align="center"/>

              <el-table-column prop="16" label="备注" width="150px" align="center"/>
            </el-table>
          </div>
          
          <!--分页-->
          <div class='page'>
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="prev, pager, next, jumper"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!--详情弹出框-->
      <div>
        <el-dialog
        v-model="dialogVisible"
        title="工单编号" 
        width="50%"
      >
      <el-divider class='line' />
      <p class='number'>{{form.number}}</p>
      <el-form>
      <div class='detail'>
          <div>
              <div class='timetrwo'>
              <p>剩余时间</p>
              <p class='time'>{{form.residue_time}}</p>
              </div>

            <div class='timer'>
              <p>触发时间</p>
              <p class='time'>{{form.trigger_time}}</p>
            </div>

            <div class='timer'>
              <p>预期完成时间</p>
              <p class='time'>{{form.expect_time}}</p>
            </div>
          </div>

          <div class='question'>
              <div>
                <el-form-item label="问题描述">
                  <el-input v-model="form.subscribe" input-style='height:60px' />
                </el-form-item>
              </div>

              <div class='center'>
                <el-form-item label="可能原因">
                  <el-input v-model="form.cause" input-style='height:60px' />
                </el-form-item>
              </div>

              <div class='center'>
                <el-form-item label="操作指令">
                  <el-input v-model="form.instruct" input-style='height:60px' />
                </el-form-item>
              </div>
              
              <div class='center'>
                <el-form-item label="友情提示">
                  <el-input v-model="form.hint" input-style='height:60px' />
                </el-form-item>
              </div>

          </div>

          <div class='right'>
            <div>
              <el-form-item label="已达级别">
                  <el-input v-model="form.label" class='label' input-style='height:30px;width:250px'/>
                </el-form-item>
            </div>

            <div class='detail'>
              <el-form-item label="已达级别">
                  <el-select  v-model="select" style="width:250px">
                        <el-option
                        v-for="item in seList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </div>

            <div style="height: 92px;">
              <el-form-item label="无法执行">
                  <el-input v-model="form.cannot_execute" placeholder="无法执行理由陈述" input-style='height:92px;width:250px'/>
              </el-form-item>
              <el-button size='small' class='commit' @click="commit">确认提交</el-button>
            </div>

            <div class='success'>
              <el-form-item label="成功执行">
                  <el-input v-model="form.success_execute" placeholder="执行过程陈述" input-style='height:92px;width:250px'/>
              </el-form-item>
              <el-button size='small' class='commit' @click="commit">确认提交</el-button>
            </div>
          </div>
      </div>
      </el-form>
      </el-dialog>
      </div>
  </div>
</template>

<script setup>
import { reactive , ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

const value = ref('')

const select = ref(0)

const currentPage = ref(5)

const dialogVisible  = ref(false)

const pageSize = ref(100)

const tableData = reactive([
  {
    1:'111',
    2:'222',
    3:'333',
    3.5:'333',
    4:'444',
    5:'555',
    6:'666',
    7:'777',
    aaa:'888',
    9:'999',
    10:'000',
    11:'000',
    12:'000',
    13:'000',
    14:'000',
    15:'000',
    16:'000',
    address:'address'
  },
  {
    1:'111',
    2:'222',
    3:'333',
    4:'444',
    5:'555',
    6:'666',
    7:'777',
    aaa:'999',
    9:'999',
    10:'000',
    11:'000',
    12:'000',
    13:'000',
    14:'000',
    15:'000',
    16:'000'
  }
])

const form = reactive({
    number:'220426-001',
    residue_time:'00:30:01',
    trigger_time:'00:30:01',
    expect_time:'00:30:01',
    subscribe:'冷冻睡温度高于设定点3度',
    cause:'111111',
    instruct:'111111',
    hint:'111111',
    label:'张三（物业经理）',
    cannot_execute:'',
    success_execute:''

})

const options1 = reactive([
    {
    label:'所有',
    value:0
  },
    {
    label:'能效',
    value:1
  },
    {
    label:'舒适',
    value:2
  },
    {
    label:'安全',
    value:3
  }
])

const options2 = reactive([
  {
    label:'一分钟',
    value:0
  },
    {
    label:'五分钟',
    value:1
  },
    {
    label:'一小时',
    value:2
  },
    {
    label:'一天',
    value:3
  },
    {
    label:'一月',
    value:4
  },
])

const seList = reactive([
  {
    label:'设备正常',
    value:0
  },
  {
    label:'设备损坏',
    value:1
  },
  {
    label:'设备异常',
    value:2
  },
  {
    label:'其他',
    value:3
  },
])

//表头下拉选项框
const filterTag = (value, row) => {
  console.log('val',value);
  console.log('row',row.aaa);
  return row.aaa == value
}

//设置全选框隐藏
const cellClass = (row) =>{
  if(row.columnIndex ===0){
        return'disabledCheck'
  }
}

//打开详情
const commit = () =>{
    dialogVisible.value=false
}

//分页
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

//详情确认提交
const handleClick = (e) =>{
  dialogVisible.value=true
  console.log(e);
}


//表头文字换行
const urgency = () =>{
  return `紧急\n类别`;
}

const work_order = () =>{
  return `工单\n类别`;
}

const equipment = () =>{
   return `涉及\n设备/系统`;
}

const personnel = () =>{
  return `执行\n人员姓名`;
}
</script>

<style scoped lang='less'>
:deep(.jinji)  {
  .cell{
    position:relative;
    span{
      position:absolute;
      right:9px;
      bottom:0;
    }
  }
}
.main{
  height:100%;
  background-color:#eaf2fa;
  overflow: hidden;
}

.top{
  margin-left: 30px;
  margin-top: 5px;
}

.card{
  width:1480px;
  height: 550px;
  margin-top: 15px;

}
.card  :deep(.el-card__body){
    padding:0 !important;
  }  

.search{
  display: flex;
  margin-top:20px;
}

.btn{
  margin-left: 10px;
  width: 110px;
  background-color:#8faadc;
  color:white;
}

.el-table{
  margin-top: 10px;
  padding:0;
}

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 32px;
}

.el-table :deep(.disabledCheck) .cell .el-checkbox__inner {
  display: none !important;
}
.el-table :deep(.disabledCheck)>div{
      white-space: normal !important;
      line-height:15px;
}
.el-table :deep(.disabledCheck) .cell::before {
  content:'收到确认';
}

:deep(.el-table th.el-table__cell) > .cell {
   white-space: pre;
}

.page{
  margin-left: 950px;
  margin-top: 10px;
}

:deep(.el-dialog__title) {
  color:#7b6ea5;
  letter-spacing: 1px;
}

.number{
  color:#636ea6;
  font-weight: bold;
  position: absolute;
  left: 110px;
  top: 25px;
}

.detail{
  display: flex;
}

.time{
  font-size: 20px;
  color:#6b8cd4;
  margin-top: 10px;
}

.timer{
  margin-top: 40px;
}

.timetrwo{
  margin-top: 30px;
}

.question{
  margin-left: 30px;
}

.center{
  margin-top: 20px;
}

.cause{
  overflow: hidden;
}

.right{
  margin-left: 30px;
}

.commit{
  height:30px;
  width: 65px;
  position: relative;
  top: -80px;
  left: -5px;
  background-color: #8faadc;
  color: white;
}

.success{
  margin-top: 20px;
}

.line{
  position: absolute;
  top: 40px;
  left: 0px;
}

.type{
  font-size: 20px;
}

.cell{
  cursor:pointer;
  color:#606266;
}

.cell:hover{
  color:rgb(77, 98, 165);
}


</style>